La mayoría de los navegadores utilizan el estándar DOM definido por la W3C como es el caso de Firefox, pero a día de hoy podemos encontrar navegadores con su propio modelo DOM, por ejemplo Microsoft. Es por lo que es necesario controlar el nombre y sintaxis de las funciones.

El flujo de eventos define el orden en que se ejecutan los eventos asociados a los elementos DOM de las páginas Web. Mientras bubbling define el orden partiendo del elemento más específico hasta el menos, capturing utiliza el sistema contrarío, es decir, del menos específico al más específico.

Para la correcta compresión del ejemplo, es necesario disponer de conocimientos de JavaScript, si este no es tu caso dispones del capítulo 12 dedicado enteramente a este lenguaje.

El objeto evento lo utilizamos para transmitir información sobre el evento producido, un ejemplo sería conocer que tecla se ha pulsado.

Navegadores que cumplen el estándar:

Propiedad

Descripción

event.altKey

Si se pulsó la tecla alt.

event.bubbles 

Indica si el evento pertenece al flujo bubbling.

event.button 

Tecla del ratón.

event.cancelable 

Indica si el evento se puede cancelar.

event.charCode 

Devuelve el código de la tecla pulsada si es carácter.

event.clientX 

Posición horizontal del evento.

event.clientY 

Posición vertical del evento.

event.ctrlKey 

Se pulsó CTRL.

event.currentTarget 

Devuelve una referencia al objeto actual registrado para el evento.

event.detail 

Detalles del evento.

event.eventPhase 

Fase a la que pertenece el evento.

event.isChar 

Obtenemos si la tecla es un carácter.

event.keyCode 

Devuelve el código de la tecla pulsada si no es carácter.

event.layerX

Coordenada horizontal del evento relativo a la capa actual.

event.layerY 

Coordenada vertical del evento relativo a la capa actual.

event.metaKey 

Devuelve verdadero si se pulsó una tecla META.

event.pageX 

Devuelve la coordenada horizontal del evento relativa al documento.

event.pageY

Devuelve la coordenada vertical del evento relativa al documento.

event.relatedTarget 

Objeto secundario para el evento.

event.screenX

Coordenada horizontal del evento en pantalla.

event.screenY 

Coordenada vertical del evento en pantalla.

event.shiftKey 

Se pulsó shift.

event.target 

Devuelve una referencia al objeto en la cual el evento fue originalmente enviado.

event.timeStamp

Momento de creación del evento.

event.type 

Tipo del evento.

event.which

Devuelve el código de la tecla pulsada.

Propiedades específicas para Firefox:

event.explicitOriginalTarget 

El objetivo del evento.

event.originalTarget 

El objetivo principal de un evento, antes de cualquier reapunte.

La propiedad innerHTML no forma parte de la especificación W3C pero dada su popularidad, simplicidad y la portabilidad en la mayoría de los navegadores actuales hemos decidido incluirla.

Propiedad

Descripción

readyState

Estado del objeto, disponemos de los siguientes valores:

* 0: Sin inicializar.

* 1: Cargando.

* 2: Cabeceras recibidas.

* 3: Aunque el usuario puede interactuar con el objeto, no está totalmente cargado.

* 4: Completado.

responseBody

Obtenemos la respuesta del servidor como una matriz de bytes.

responseText

Obtenemos la respuesta del servidor como una cadena de texto.

responseXML

Obtenemos la respuesta del servidor en formato XML.

status

Obtenemos el estado de la petición devuelta por el servidor: 200 (OK, sin problemas), 404, etc.

statusText

Igual que el anterior pero en vez de obtener un número obtenemos la cadena de texto: “OK”, “Objeto no encontrado”, “Error interno del servidor”, etc.

Métodos

Descripción

abort()

Aborta o finaliza la petición actual.

getAllResponseHeaders()

Obtenemos en una cadena de texto todo el conjunto de cabeceras pedidas al servidor.

getResposeHeader(nombre_cabecera)

Devuelve en una cadena de texto la cabecera pedida.

open (método, URL, sincronía, usuario, clave)

Abre una conexión con el servidor. Los parámetros utilizados son:

* método: Puede ser “GET” o “POST”. Indicamos el tipo de conexión.

* URL: Dirección a la que realizamos la petición.

* sincronía: Valor lógico en el que indicamos si deseamos comunicación síncrona o asíncrona (valor true).

* usuario: Parámetro opcional sólo será necesario en el caso de necesitar proporcionar esta información al servidor.

* clave: al igual que usuario es un parámetro opcional que no lo necesitaremos a no ser que el servidor nos lo exija.

send (datos)

Enviamos los datos al servidor.

setRequestHeader (etiqueta, valor)

Permite establecer el valor de las cabeceras en la petición al servidor.

Evento

Descripción

onreadystatechange

Evento que se dispara con el cambio del estado.

onabort

Evento que se produce al abortar la petición.

onload

Al completar la carga.

onloadstart

Al iniciar la carga.

onprogress

Evento periódico con información de estado.

La manera más simple de incluir un mapa en una página Web es utilizar el servicio que nos presta Google.

1.- Dirígete a la página http://maps.google.com

2.- Selecciona el enlace Mis mapas, situado en la parte superior derecha.

3.- Ahora haz clic en Crear un mapa nuevo. Es requisito disponer de una cuenta en Google, si no la tienes ahora es un buen momento.

4.- Nos toca definir el mapa, sitúate donde quieras, tienes todo el globo terráqueo para investigar. Ve añadiendo y editando los elementos que quieras. Dispones de una barra de herramientas en la parte superior del mapa en la que puedes:

* Con el icono de la mano, situarte donde quieras.

* El globito, para añadir marcadores.

* Líneas, para indicar, por ejemplo el recorrido.

* Insertar formas, mediante el polígono.

Cada herramienta dispone de bastantes opciones, observa la ilustración inferior, hemos seleccionado León, vamos a añadir una foto y un comentario.

Para indicar los enlaces a imágenes, ten en cuenta que han de estar ubicadas en el servidor, o en alguna URL pública de Internet, para posteriormente visualizarlas correctamente.

5.- Una vez hayas terminado de editar el mapa, haz clic en Listo.

6.-Ahora vamos a obtener el código fuente para insertarlo en nuestra página. Selecciona Enlazar.

7.- Fíjate en la información que te muestra, puedes enviarla por e-mail o copiar el código HTML que te indica.

8.- Una buena práctica es seleccionar Personalizar y obtener vista previa del mapa que se va a insertar.

9.- Ahora puedes elegir el tamaño del mapa y ajustarlo al diseño de tu página.

10.- Una vez configurado el mapa copia el código y pégalo en tú página, obtendrás un resultado sorprendente.

Recuerda que el mapa utiliza tecnología AJAX y es totalmente funcional. A continuación te mostramos el mapa que hemos realizado.

La etiqueta que utilizamos para insertar los mapas es <iframe> con ella insertamos páginas Web dentro de otras. Su sintaxis básica es:

<iframe width=x height=y src=”url” >Texto</iframe>

Para los que deseen más funcionalidad sobre los mapas, Google pone a su disposición la API de maps.

Estos son los pasos a seguir para utilizar la API:

1.- Dirígete a la dirección http://code.google.com.

2.-Esta es la página principal para los desarrolladores con productos de Google, no está de más que la examines con detenimiento.

3.- Selecciona el enlace API y herramientas.

4.- Busca en la sección deslizante la API de Google Maps y haz clic.

5.- Dirígete a la página de documentación, en la sección detalles: http://code.google.com/intl/es/apis/maps/documentation/index.html

6.- Para poder utilizar la API necesitamos una clave, que tendremos que incluir en el código fuente de nuestras páginas. Selecciona Solicitud de una clave para el API, situado en la esquina superior izquierda.

7.- Tienes que aceptar las condiciones de uso, marca “He leído y estoy de acuerdo…”.

8.- Índica la URL del sitio Web donde vayas a utilizar los mapas. Para las pruebas en tu servidor local puedes indicar http://127.0.0.1. y pulsa en Generar clave de API.

9.-En la siguiente ilustración te mostramos la pantalla resultante del proceso, en ella disponemos de la información de la clave y un ejemplo de uso.

Para obtener la clave de la API de cualquier servicio de Google es necesario que estemos registrados y contemos con una cuenta.

https://www.google.com/accounts/Login

Examinemos el código fuente del que disponemos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Google Maps JavaScript API Example</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=TUCLAVE"

type="text/javascript">

</script>

<script type="text/javascript">

//<![CDATA[

function load() {

    if (GBrowserIsCompatible()) {

      var map = new GMap2(document.getElementById("map"));

      map.setCenter(new GLatLng(37.4419, -122.1419), 13);

    }

}

//]]>

</script>

</head>

<body onload="load()" onunload="GUnload()">

<div id="map" style="width:500px;height:300px"></div>

</body>

</html>

Vamos a empezar definiendo las coordenadas de nuestro mapa.

Abre tu navegador y carga Google Maps.

http://maps.google.com/.

Sitúate donde desees y haz clic en el enlace Enlazar, ubicado en la esquina superior derecha.

Copia la etiqueta <iframe> que te muestran.

Dentro de esta etiqueta están las coordenadas del mapa que estas visualizando, concretamente en el atributo “ll”. Puedes utilizar también http://itouchmap.com/latlong.html. Cópialas y cámbiaselas a la función GLatLng de tu página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Google Maps JavaScript API Example</title>

<script type="text/javascript" src="http://www.google.com/jsapi?key=TUCLAVE"></script>

<script type="text/javascript">

google.load("maps", "2.x");

// Llama a esta función cuando la página se ha cargado.

function load()

    {

      var map = new google.maps.Map2(document.getElementById("map"));

      map.setCenter(new google.maps.LatLng(40.759025,-73.983736), 13);

/*******Añadiendo Controles**********/

      map.addControl(new GMapTypeControl()); //Tipo de Mapa

      map.addControl(new GLargeMapControl()); //Escala

      map.addControl(new GOverviewMapControl()); //Mini mapa

/************************************/

     }

google.setOnLoadCallback(load);

</script>

</head>

<body onload="load()" onunload="GUnload()">

<div id="map" style="width:800px;height:600px"></div>

</body>

</html>

Si deseas cambiar el tipo de mapa inicial, por ejemplo, a satélite dispones de las siguientes constantes:

* G_NORMAL_MAP: Predeterminada.

* G_SATELLITE_MAP: Satélite.

* G_HYBRID_MAP: Híbrido.

La instrucción a incluir es:

map.setMapType(G_SATELLITE_MAP);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Google Maps JavaScript API Example</title>

<script type="text/javascript" src="http://www.google.com/jsapi?key=TUCLAVE"></script>

<script type="text/javascript">

google.load("maps", "2.x");

// Llama a esta función cuando la página se ha cargado.

function load()

    {

        var map = new google.maps.Map2(document.getElementById("map"));

        map.setCenter(new google.maps.LatLng(40.759025,-73.983736), 13);

/*******Añadiendo Controles**********/

        map.addControl(new GMapTypeControl()); //Tipo de Mapa

        map.addControl(new GLargeMapControl()); //Escala

        map.addControl(new GOverviewMapControl()); //Minimapa

/*******Añadiendo Marcadores**********/

         var longitud= 40.759025;

         var latitud = -73.983736

         var Coordenadas = new GLatLng (longitud, latitud);

/*Creamos el marcador invocando al método addOverlay de la clase mapa (Map2) con el argumento un objeto de la clase GMarker */

        map.addOverlay(new GMarker(Coordenadas));

        Coordenadas.title='<b>Nueva York</b><br/><p><img src="imagenes/NuevaYork.jpg" height="400" width="500"><br/> Un viaje estupendo</p>';

/* El método openInfoWindowHtml abre una ventana de información en el punto que se indique. El contenido de la información se indica como texto HTML */

        map.openInfoWindowHtml(map.getCenter(),Coordenadas.title);

/*************************************/

     }

google.setOnLoadCallback(load);

</script>

</head>

<body onload="load()" onunload="GUnload()">

<div id="map" style="width:800px;height:600px"></div>

</body>

</html>

Recursos:

http://code.google.com/intl/es/apis/maps/documentation/reference.html

Esta página es el manual de referencia de las API de Google. Encontrarás todas las clases, con sus atributos y métodos. Se trata de un recurso esencial.

http://code.google.com/intl/es/

Desde aquí podrá acceder a la todas las secciones de los desarrolladores.

http://code.google.com/intl/es/apis/maps/documentation/

Documentación específica para la API de Maps, con un montón de ejemplos.

http://www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html

Manual del API de Google Map del portal DesarrolloWeb.